<template>
    <div class="app-menu-item">
        <template v-for="item in menus">
            <template v-if="item.items && Array.isArray(item.items) && item.items.length > 0">
                <el-submenu
                    :class="[{ isCollpase: appMenuCollapseFlag }, item.textcls]"
                    v-show="!item.hidden"
                    :index="item.name"
                    :popper-class="popperClass"
                    :key="item.id"
                >
                    <template slot="title">
                        <template v-if="item.icon && item.icon != ''">
                            <img :src="item.icon" class="app-menu-icon" />
                        </template>
                        <template v-else-if="item.iconcls && item.iconcls != ''">
                            <i :class="[item.iconcls, 'app-menu-icon']"></i>
                        </template>
                        <template v-else>
                            <i v-if="isFirst" class="fa fa-cogs app-menu-icon"></i>
                        </template>
                        <span
                            ref="circleText"
                            :class="{ 'app-menu-circle': appMenuCollapseFlag, text: true }"
                            :title="$t(`app.menus.${ctrlName}.${item.name}`)"
                            >{{ $t(`app.menus.${ctrlName}.${item.name}`) }}</span
                        >
                    </template>
                    <app-menu-item
                        :isCollapse="isCollapse"
                        :menus="item.items"
                        :ctrlName="ctrlName"
                        :isFirst="false"
                        :counterdata="counterdata"
                        :popper-class="popperClass"
                    ></app-menu-item>
                </el-submenu>
            </template>
            <template v-else>
                <template v-if="item.type == 'MENUITEM'">
                    <el-menu-item
                        :class="[{ isFirst: isFirst }, item.textcls]"
                        v-show="!item.hidden"
                        :index="item.name"
                        :key="item.id"
                    >
                        <template v-if="item.icon && item.icon != ''">
                            <img :src="item.icon" class="app-menu-icon" />
                            <span
                                v-if="isFirst && isCollapse ? true : false"
                                ref="circleText"
                                :class="{ 'app-menu-circle': appMenuCollapseFlag, text: true }"
                                :title="$t(`app.menus.${ctrlName}.${item.name}`)"
                                >{{ $t(`app.menus.${ctrlName}.${item.name}`) }}</span
                            >
                        </template>
                        <template v-else-if="item.iconcls && item.iconcls != ''">
                            <i :class="[item.iconcls, 'app-menu-icon']"></i>
                            <span
                                v-if="isFirst && isCollapse ? true : false"
                                ref="circleText"
                                :class="{ 'app-menu-circle': appMenuCollapseFlag, text: true }"
                                :title="$t(`app.menus.${ctrlName}.${item.name}`)"
                                >{{ $t(`app.menus.${ctrlName}.${item.name}`) }}</span
                            >
                        </template>
                        <template v-else>
                            <i v-if="isFirst" class="fa fa-cogs app-menu-icon"></i>
                            <span
                                v-if="isFirst && isCollapse ? true : false"
                                ref="circleText"
                                :class="{ 'app-menu-circle': appMenuCollapseFlag, text: true }"
                                :title="$t(`app.menus.${ctrlName}.${item.name}`)"
                                >{{ $t(`app.menus.${ctrlName}.${item.name}`) }}</span
                            >
                        </template>
                        <template slot="title">
                            <span
                                :class="{ 'app-menu-circle': appMenuCollapseFlag, text: true }"
                                :title="$t(`app.menus.${ctrlName}.${item.name}`)"
                                >{{ $t(`app.menus.${ctrlName}.${item.name}`) }}</span
                            >
                            <template
                                v-if="counterdata && counterdata[item.counterid] && counterdata[item.counterid] > 0"
                            >
                                <span class="pull-right">
                                    <badge :count="counterdata[item.counterid]" :overflow-count="9999"></badge>
                                </span>
                            </template>
                        </template>
                    </el-menu-item>
                </template>
                <template v-if="item.type == 'SEPERATOR'">
                    <divider :key="item.id" />
                </template>
            </template>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({})
export default class AppMenuItem extends Vue {
    /**
     * 菜单数据
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop({ default: [] }) public menus!: any;

    /**
     * 部件名称
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public ctrlName!: string;

    /**
     * 计数器数据
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public counterdata!: any;

    /**
     * 提示框主题样式
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public popperClass!: any;

    /**
     * 是否是一级菜单
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public isFirst!: boolean;

    /**
     * 菜单是否缩进
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    @Prop() public isCollapse!: boolean;

    /**
     * 菜单缩进，元素类名标记
     *
     * @type {*}
     * @memberof AppMenuItem
     */
    public appMenuCollapseFlag: boolean = false;

    /**
     * vue  生命周期
     *
     * @memberof AppIndexViewBase
     */
    public mounted() {
        this.onCollapsechangeChange();
    }

    /**
     * 根据菜单缩进状态修改菜单项值
     */
    onCollapsechangeChange() {
        if (this.isCollapse && this.isFirst) {
            this.appMenuCollapseFlag = true;
            let appMenuCircle: any[] = this.$refs.circleText as any[];
            if (appMenuCircle) {
                appMenuCircle.forEach((item: any) => {
                    let text: string = (item.innerText as string).slice(0, 1);
                    item.innerText = text;
                });
            }
        }
    }
}
</script>
